<template>
  <div id="component_cygn">
    <a v-for="(fns,fn_index) in cygnList" :key="fn_index" :href="fns.url" class="component_cygn_item">
      <p><img :src="fns.icon" /></p>
      <p>{{fns.name}}</p>
    </a>
  </div>
</template>

<script>

export default {
  data() {
    return {
      cygnList:[
        {name:"公务邮件",icon:require("@/assets/img/MicroModule/cygn_gwyj.png"),url:""},
        {name:"值加班查询",icon:require("@/assets/img/MicroModule/cygn_zjbcx.png"),url:""},
        {name:"工资查询",icon:require("@/assets/img/MicroModule/cygn_gzcx.png"),url:""},
        {name:"账号申请",icon:require("@/assets/img/MicroModule/cygn_zhsq.png"),url:""},
        {name:"会议室",icon:require("@/assets/img/MicroModule/cygn_hys.png"),url:""},
        {name:"公文处理",icon:require("@/assets/img/MicroModule/cygn_gwcl.png"),url:""},
      ],
    }
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
#component_cygn{
  display:flex;
  flex: 1;
  box-sizing: border-box;
  padding:10px 10px 20px 10px;
  flex-direction: row;
  position:relative;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  .component_cygn_item{
    width: 33.333333%;
    display: block;
    position:relative;
    min-height: 12px;
    text-align: center;
    box-sizing: border-box;
    padding: 10px;
    color:#666666;
    min-width: 100px;
    p{
      display: block;
      position: relative;
      text-align: center;
      margin-top: 5px;
      img{
        width: 80px;
        height: 80px;
      }
    }
  }
}
</style>